import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import SettingLayout from '@/component/setting/Layout';
import SettingStyle from '@/page/setting/setting.scss';

import CorporateModal from '@/component/setting/CorporateModal';
import OperModal from '@/component/common/OperModal';

import AlStore from '@/store/Alliance';

const LabelItem = OperModal.LabelItem;

@observer class SettingInfo extends Component {
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func
    };
    defaultState = {
        loading: true,
        corporateAccountVisible: false,
        corporateAccount: '',
        bankCardNumber: ''
    };
    state = this.defaultState;
    async componentDidMount() {
        this._isMounted = true;
        await AlStore.getInfo();
        this._setState({ loading: false });
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    closeCorporateModal = () => {
        this.setState({ corporateAccountVisible: false });
    };
    corporateModalVisible = () => {
        this.setState({
            corporateAccountVisible: true
        })
    };
    bankCardNumber = (e) => {
        let value = e.target.value;
        this.setState({
            bankCardNumber: value
        })
    };
    nameChange = (e) => {
        let value = e.target.value;
        this.setState({
            corporateAccount: value
        })
    };
    render() {
        const { corporateModalVisible, closeCorporateModal } = this;
        const { corporateAccountVisible } = this.state;
        return (
            <SettingLayout loading={this.state.loading}>
                <h2 className={SettingStyle['title']}>基本资料</h2>
                <div className={SettingStyle['data-wrap']}>
                    <div>公司全称:  <span>{AlStore.info.company_name}</span></div>
                    <div className={SettingStyle['info-label-item']}>联系人:  <span>{AlStore.info.contact}</span></div>
                    <div className={SettingStyle['info-label-item']}>电话:  <span>{AlStore.info.contact_number}</span></div>
                    <div className={SettingStyle['info-label-item']}>电子邮箱:  <span>{AlStore.info.contact_email}</span></div>
                    <div className={SettingStyle['info-label-item']}>地址:  <span>{AlStore.info.org_address}</span></div>
                    <hr />
                    <div style={{ marginTop: '36px', overFlow: 'hidden' }}>
                        对公/个人：<span className={SettingStyle['info-label-item-name']}>{AlStore.info.company_name == '' ? '未填写' : AlStore.info.company_name}/{AlStore.info.contact}</span>
                        尾号：<span className={SettingStyle['info-label-item-number']}>{AlStore.info.accountMini}</span>
                        <a className={SettingStyle['info-label-item-button']} onClick={corporateModalVisible} style={{ border: 'none', background: 'white' }}>修改</a>
                    </div>
                </div>
                <CorporateModal visible={corporateAccountVisible} onClose={closeCorporateModal} />
            </SettingLayout>
        );
    }
}

export default SettingInfo;